<template>
  <q-page class="cc-admin row">
    <div class="col bg-white shadow-2 q-pa-md q-ma-sm">
      <q-table
        flat
        color="primary"
        class="cross_table"
        separator="cell"
        :columns="columns"
        :data="list"
        row-key="id"
        :pagination.sync="pagination"
        :visible-columns="group"
        @request="query"
        :rows-per-page-options="[10,20,50,100]"
        :loading="loading"
        :selected.sync="selected"
      >
        <template v-slot:top>
          <div class="row no-wrap full-width">
            <!--<q-input clearable outlined dense placeholder="请输入关键字搜索" class="on-left"
              @input="query" debounce="500" v-model="key" >
              <template #append>
                <q-btn flat round icon="search" color="primary" @click="query" :loading="loading">
                  <q-tooltip>搜索</q-tooltip>
                </q-btn>
              </template>
            </q-input>
            <q-space />-->
            <div class="q-gutter-xs">
              <!--<q-btn icon="add" no-wrap color="primary" label="新建" @click="add" />-->
              <q-btn icon="mdi-home" no-wrap color="primary" label="返回服务商列表" @click="go_back" />
              <q-btn icon="mdi-restore" no-wrap color="grey" label="刷新列表" @click="refresh" />
            </div>
          </div>
        </template>
        <template #body-cell-is_del="props">
          <q-td  key="is_del" :props="props">{{getGoodsLabel(props.row.is_del) }}</q-td>
        </template>
        <template #body-cell-ctype="props">
          <q-td key="ctype" :props="props">
            <div v-if="props.row.ctype==15">特殊贡献</div>
            <div v-if="props.row.ctype!=15">推广奖励</div>
          </q-td>
        </template>
        <template #body-cell-note="props">
          <q-td key="note" :props="props">
            <div v-if="props.row.note == '增加特殊贡献'" style="color: black">{{props.row.note}}</div>
            <div v-if="props.row.note == '减少特殊贡献'" style="color: red">{{props.row.note}}</div>

            <div v-if="props.row.note == '增加股权'" style="color: black">{{props.row.note}}</div>
            <div v-if="props.row.note == '减少股权'" style="color: red">{{props.row.note}}</div>

            <div v-if="props.row.note == '增加原始股权'" style="color: black">{{props.row.note}}</div>
            <div v-if="props.row.note == '减少原始股权'" style="color: red">{{props.row.note}}</div>

            <div v-if="props.row.note == '增加市场股权'" style="color: black">{{props.row.note}}</div>
            <div v-if="props.row.note == '减少市场股权'" style="color: red">{{props.row.note}}</div>
          </q-td>
        </template>
        <template #body-cell-event="props">
          <q-td key="event" :props="props">
            <div v-if="props.row.event==1">充值到预存款</div>
            <div v-if="props.row.event==2">从预存款提现</div>
            <div v-if="props.row.event==3">从预存款支付</div>
            <div v-if="props.row.event==4">退款到预存款</div>
            <div v-if="props.row.event==5">佣金提现到预存款</div>
            <div v-if="props.row.event==6">充值奖励</div>
          </q-td>
        </template>
        <template #body-cell-opt="props">
          <q-td :props="props" :auto-width="true">
            <q-btn flat round dense color="primary" icon="edit" @click="edit3(props.row)">
              <q-tooltip>编辑</q-tooltip>
            </q-btn>
           <!--<btn-del label="商品管理" @confirm="del(props.row)" />-->
          </q-td>
        </template>
      </q-table>
    </div>
    <q-dialog ref="dialogEditVisible"  v-model="dialogEditVisible" :full-height="false">
      <q-layout view="Lhh lpR fff" container class="bg-white" style="height:560px;">
          <q-header class="bg-primary">
            <q-toolbar>
              <q-toolbar-title>用户股权修改</q-toolbar-title>
              <q-btn flat v-close-popup round dense icon="close" />
            </q-toolbar>
          </q-header>
          <q-form @submit="onSubmit" @reset="onReset" style="padding-top: 50px;">
            <q-card style="width: 560px;height:460px;">
              <q-card-section>
                <div class="row q-col-gutter-x-md  q-pa-md">
                  <div class="col-6">
                    <q-input dense disable v-model="form.uid" type="text" readonly >
                      <template v-slot:before>
                        <div style="width:90px;font-size: 14px;font-weight:bold;padding-right: 10px;">用户UID:</div>
                      </template>
                    </q-input>
                  </div>
                </div>
                <div class="row q-col-gutter-x-md  q-pa-md">
                  <div class="col-6">
                    <q-input dense disable v-model="form.true_name" type="text" readonly >
                      <template v-slot:before>
                        <div style="width:90px;font-size: 14px;font-weight:bold;padding-right: 10px;">用户姓名:</div>
                      </template>
                    </q-input>
                  </div>
                </div>
                <div class="row q-col-gutter-x-md  q-pa-md">
                  <div class="col-6">
                    <q-input dense  v-model="form.amount" type="text"  :rules="[requiredTest]" >
                      <template v-slot:before>
                        <div style="width:90px;font-size: 14px;font-weight:bold;color:red;padding-right: 10px;">金额(必填):</div>
                      </template>
                    </q-input>
                  </div>
                </div>
                <div class="row q-col-gutter-x-md  q-pa-md">
                  <div class="col-12">
                    <q-input dense v-model="form.note" type="text"   >
                      <template v-slot:before>
                        <div style="width:90px;font-size: 14px;font-weight:bold;padding-right: 10px;">备注:</div>
                      </template>
                    </q-input>
                  </div>
                </div>
              </q-card-section>
            <div class="row justify-center q-pa-md">
              <div style="float: left ">
                <q-btn class="q-mx-sm" color="primary" icon="mdi-check-bold" label="增加股权" type="submit" />
              </div>
              <div style="float: left;margin-left: 20px; ">
                <q-btn outline color="primary" icon="mdi-close-thick" label="关闭" v-close-popup />
              </div>
              <div style="float: left;margin-left: 20px; ">
                <q-btn class="q-mx-sm" color="red" icon="mdi-close-outline" label="扣除股权" @click="sub_stock" />
              </div>
            </div>
            </q-card>
          </q-form>
      </q-layout>
    </q-dialog>
    <confirm ref="confirmDialog" :msg="confirmMsg" @confirm="deleteBatch()" />
  </q-page>
</template>

<script>
import { IndexMixin } from 'boot/mixins';
import { getDictLabel } from 'boot/dictionary';
import confirm from 'components/confirm';
import { requiredTest } from 'boot/inputTest';
import catalogselect from 'components/catalogselect';
import viewcatalog from 'components/viewcatalog';

export default {
  name: 'MntDeploy',
  mixins: [IndexMixin],
  components: {
    confirm,
    catalogselect,
  },
  data() {
    return {
      form: {
        uid: '',
        amount: '',
        user_name: '',
        note: '',
        is_add: 1,
      },
      columns: [
        // { name: "id", align: "center", label: "序号", field: "id", },
        { name: "user_id", align: "center", label: "用户id", field: "user_id", },
        { name: "true_name", align: "center", label: "用户姓名", field: "true_name", },
        { name: "amount", align: "center", label: "当前金额", field: "amount", },
        { name: "amountLog", align: "center", label: "变化之后的金额", field: "amountLog", },
        { name: "ctype", align: "center", label: "类型", field: "ctype", },
        { name: "note", align: "center", label: "备注", field: "note", },
        { name: "ctime", align: "center", label: "获得时间", field: "ctime", },
        { name: "opt", align: "center", label: "修改", field: "ctime", },
      ],
      showQuery: true,
      headers: [{ name: 'Authorization', value: localStorage.Authorization }],
      uploadUrl: `${process.env.BASE_URL}/uploadfile`,
      imgUrl: `http://img.tel.gzzsu.com`,
      url: {
        list: '/stockloglist',
        add: '/stockadd',
        edit: '/stockadd'
      },
      isEdit: 0,
      modelList: [],
      dialogEditVisible: false,
    };
  },
  methods: {
    // 扣除股权数
    sub_stock(){
      let url = this.url.add
      if(this.form.amount < 0){
        this.$q.notify({ color: 'red', message: '股权数不能小于0', position: 'center' });
        return
      }else{
        this.form.is_add = 2
        this.$axios.post(url, this.form ).then((r) => {
          this.babyWord = r;
          if(r.success = true){
            this.$q.notify({ position: 'center', color: 'info', textColor: 'white', group: false, html: true, message: '保存成功',});
            this.onReset()
            this.refresh()
            this.$refs.dialogEditVisible.hide();
          }else{
            this.$q.notify({ position: 'center', color: 'error', textColor: 'red', group: false, html: true, message: '保存失败',});
          }
        });
      }
    },
    edit3(row) {
      this.form.uid = row.user_id
      this.form.amount = row.amount
      this.form.true_name = row.true_name
      this.dialogEditVisible = true
    },
    queryParam() {   //查询前处理参数，使用这个
      return  { uid: this.$route.query.id  ? this.$route.query.id : 0 }
    },
    go_back(){
      this.$router.push({
        path: '/memberserver/list'
      })
    },
    refresh(){
      this.query()
    },
    requiredTest,
    getGoodsLabel(status){
      const list = {
        menuType: [0 , 1, 2 ],
        icon: ['正常', '删除' ],
      };
      const showStatus = ['正常', '删除' ];
      return showStatus[status]
    },
    onSubmit (evt) {
      //this.form.isEdit = this.isEdit
      console.log( this.form  )
      let url = this.url.add
      if(this.form.amount < 0){
        this.$q.notify({ color: 'red', message: '股权数不能小于0', position: 'center' });
        return
      }else{
        this.$axios.post(url,this.form).then((r) => {
          this.babyWord = r;
          if(r.success = true){
            this.$q.notify({ position: 'center', color: 'info', textColor: 'white', icon: 'cloud_done', group: false, html: true, message: '保存成功！！',});
            this.onReset()
            this.refresh()
            this.$refs.dialogEditVisible.hide();
          }else{
            this.$q.notify({ position: 'center', color: 'error', textColor: 'red', icon: 'cloud_done', group: false, html: true, message: '保存失败！！',});
          }
        });
      }
      //evt.target.submit()
    },
    onReset(){
      this.form = {
        uid: '',
        amount: '',
        user_name: '',
        note: '',
        is_add: 1,
      }
    },
  },
  mounted() {
    if (this.$route.query.id) {
      this.user_id = this.$route.query.id
    }


  },
};
</script>

<style lang="stylus"></style>
